<template>
    <div>
        <van-cell :icon="icon" :required="option.editable && option.required" :title="option.title" is-link  :label="value" @click="showInput" />
        <van-popup v-model="showDetail" style="width:80vw; min-height: 200px; display: flex; align-items: center; justify-content: center">
            <div>
                {{option.value}}
            </div>
        </van-popup>
        <van-popup v-model="show" style="height: 200px">
            <div class="input-box">
                <textarea ref="textarea" v-model="inputValue" name="" id="" cols="30" rows="10"></textarea>
                <div class="btngroup">
                    <van-button class="btn" @click="confirm">确定</van-button>
                    <van-button class="btn" @click="cancel">关闭</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        props: ["option"],
        name: "textarea.vue",
        data(){
            return {
                inputValue: "",
                value: this.init(),
                show: false,
                showDetail: false
            }
        },
        computed:{
            icon(){
                if(this.option.editable){
                    return "edit";
                } else {
                    return "";
                }
            }
        },
        methods:{
            init(){
                return ""
            },
            confirm(){
                this.value = this.option.value = this.inputValue;
                this.show = false
            },
            cancel(){
                this.show = false
            },
            showInput(){
                if(this.option.editable){
                    this.show = true;
                    this.inputValue = this.value;
                    this.$nextTick(() => {
                        this.$refs.textarea.focus()
                    })
                } else {
                    this.showDetail = true
                }
            }
        },
        mounted() {
            this.value = this.option.value || ""
        }
    }
</script>

<style scoped lang="less">
    /*.van-cell{*/
    /*    border-bottom: 1px solid #ddd;*/
    /*}*/
    .van-cell{
        text-align: left;
    }
    .van-cell__label{
        text-overflow: ellipsis;
        width: 80vw;
        overflow: hidden;
        white-space: nowrap;
    }
    .input-box{
        display: flex;
        padding: 10px;

        textarea{
            flex: 1;
            border-color: #eee;
            border-radius: 2px;
            padding: 5px;
            height: 160px;
        }
        .btngroup {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn {
                margin-top: 5px;
                margin-bottom: 5px;
            }
        }
    }

</style>
